<template>
  <div class="content">
    <p class="logo">
      <img src="/static/l_logo.png" alt="" />
    </p>
    <button
      v-if="checkboxValue.length"
      class="get_phone"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNum"
    >
      手机号快捷登录
    </button>
    <p class="get_phone" v-else @click="submitLogin">手机号快捷登录</p>

    <!-- <button open-type="getUserInfo" @click="getUserInfo">用户信息</button> -->

    <p class="get_phone on" @click="back">暂不登录</p>
    <div class="xieyi">
      <u-checkbox-group
        size="14"
        v-model="checkboxValue"
        placement="column"
        activeColor="#23AC39"
      >
        <u-checkbox> </u-checkbox>
      </u-checkbox-group>
      <p @click="clickGou">
        登录即视为你同意<span @click="toXieyi"
          >《服务条款》和《接单隐私政策》</span
        >
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import api from "@/api"
export default {
  data() {
    return {
      checkboxValue: [],
      shareUserId: "",
    }
  },
  computed: {
    ...mapState({
      token: (state) => state.user.token,
      userId: (state) => state.user.userId,
    }),
  },
  onLoad(options) {
    console.log(options)
    if (options.shareUserId) {
      this.shareUserId = options.shareUserId
    } else {
      this.shareUserId = ""
    }
  },
  methods: {
    toXieyi() {
      uni.navigateTo({
        url: `/pages/authorization/xieyi/index`,
      })
    },

    back() {
      uni.navigateBack({
        delta: 1,
      })
    },

    submitLogin() {
      if (!this.checkboxValue.length) {
        this.$toast("请同意《服务条款》和《接单隐私政策》!")
        return
      }
    },

    clickGou() {
      if (this.checkboxValue.length) {
        this.checkboxValue = []
      } else {
        this.checkboxValue = [""]
      }
    },

    getUserInfo() {
      // 检查是否已经授权
      uni.getSetting({
        success: (res) => {
          if (res.authSetting["scope.userInfo"]) {
            // 已经授权，调用 getUserInfo
            uni.getUserInfo({
              withCredentials: true,
              success: (userInfoRes) => {
                // 获取到用户信息
                console.log("用户信息:", userInfoRes.userInfo)
                console.log("用户头像:", userInfoRes.userInfo.avatarUrl)
              },
              fail: (err) => {
                console.error("获取用户信息失败:", err)
              },
            })
          } else {
            // 未授权，请求授权
            uni.authorize({
              scope: "scope.userInfo",
              success: () => {
                // 授权成功后再次调用 getUserInfo
                this.getUserInfo()
              },
              fail: (err) => {
                console.error("授权失败:", err)
              },
            })
          }
        },
        fail: (err) => {
          console.error("获取授权信息失败:", err)
        },
      })
    },

    getPhoneNum(e) {
      let { code } = e.mp.detail
      if (!e.target.encryptedData) {
        this.$toast("已取消~")
        return
      }
      if (e.target.errMsg !== "getPhoneNumber:ok") {
        return false
      }
      uni.login({
        success: (res) => {
          console.log(res)
          if (res.code) {
            if (e.mp.detail.errMsg == "getPhoneNumber:ok") {
              this.$showLoading("登录中...")
              let params = {
                phoneCode: code,
                loginCode: res.code,
                reference: this.shareUserId ? this.shareUserId : "",
                state: 1
              }
              this.$store.dispatch("userLogin", params).then((res) => {
                if (res.code == 200) {
                  api.user
                    .get_sell_user({ userId: this.userId })
                    .then((res) => {
                      if (res.code == 200) {
                        uni.navigateBack({
                          delta: 1,
                        })
                        this.$toast("登录成功")
                      }
                    })
                } else {
                  this.$toast(res.msg)
                }
              })
            } else {
              uni.hideLoading()
              this.$toast("已拒绝~")
            }
          } else {
            console.log("获取code失败~")
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  .logo {
    width: 128rpx;
    height: 128rpx;
    background: #f7f7f7;
    border-radius: 50%;
    margin: 136rpx auto 188rpx auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .get_phone {
    width: 74%;
    height: 86rpx;
    line-height: 86rpx;
    border-radius: 48rpx;
    background: #23ac39;
    font-size: 32rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
    &.on {
      background: #fff;
      color: #23ac39;
      border: 1px solid #23ac39;
      margin-top: 40rpx;
    }
  }
  .xieyi {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 150rpx;
    font-size: 28rpx;
    color: #999999;
    display: flex;
    justify-content: center;
    span {
      color: #23ac39;
    }
    p {
      margin-top: -2rpx;
    }
  }
  .user-box {
    width: 500rpx;
    background: #fff;
    border-radius: 10rpx;
    position: relative;
    padding: 30rpx;
    .close {
      position: absolute;
      right: 20rpx;
      top: 20rpx;
    }
    .input {
      border: 1px solid #d3d1d1;
      border-radius: 10rpx;
      margin-top: 60rpx;
      padding: 16rpx 20rpx;
      input {
        font-size: 30rpx;
      }
    }
    .anniu {
      width: 74%;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 15rpx;
      background: #23ac39;
      font-size: 32rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 50rpx auto 0 auto;
    }
  } 
}
</style>
